<template>
  <div class="table-main">
    <div class="hadn-new">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handNewAdd()">新建</el-button>
    </div>
    <div class="hand-btns">
      <span class="el-icon-warning" style="color:#38AD93;"></span>
      <span class="btns-title">
        已选择
        <span style="color:#38AD93;">0</span> 项
      </span>
      <span class="btns-clos pointer">清空</span>
    </div>
    <div class="tree_table">
      <div class="tree_right">
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{children: 'sysDictList', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="dataValue" label="数值名称" sortable width="180">
            <template slot-scope="scope">
              <span
                :style="{color:scope.row.sysDictList.length==0?'#606266':'#38ad93'}"
              >{{scope.row.dataValue}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataDesc" label="描述" sortable width="180"></el-table-column>
          <el-table-column prop="dataCode" label="数值编码"></el-table-column>
          <el-table-column prop="createTime" label="操作">
            <template scope="scope">
              <div>
                <div class="shop_btns">
                  <el-button type="text" @click="handAdd(scope.row)">添加</el-button>
                  <el-button type="text" @click="handDetail(scope.row)">详情</el-button>
                  <el-button type="text" @click="handEdit(scope.row)">编辑</el-button>
                  <el-popover
                    placement="top"
                    width="160"
                    trigger="click"
                    :ref="'popover-' + scope.row.id"
                    style="margin-left:10px;"
                  >
                    <p>确定删除?</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="handPopClos(scope.row)">取消</el-button>
                      <el-button type="primary" size="mini" @click="handPopDel(scope.row)">确定</el-button>
                    </div>
                    <el-button type="text" @click="handDel(scope.row)" slot="reference">删除</el-button>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog width="60%" title="字典表" :visible.sync="dialogVisible" @close="handleClose">
        <div style="margin-top:50px;">
          <el-form ref="forms" :model="tableObj" label-width="120px" :rules="rules">
            <el-row :gutter="20" justify="center" type="flex">
              <el-col :span="16">
                <el-form-item label="数值名称:" prop="dataValue">
                  <el-input :disabled="isShow" v-model="tableObj.dataValue" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="center" type="flex">
              <el-col :span="16">
                <el-form-item label="数据描述:" prop="dataDesc">
                  <el-input :disabled="isShow" v-model="tableObj.dataDesc" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="center" type="flex">
              <el-col :span="16">
                <el-form-item label="数据排序:" prop="sortNo">
                  <el-input-number v-model="tableObj.sortNo" label="描述文字"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="center" type="flex">
              <el-col :span="16">
                <el-form-item label="数据编码:" prop="dataType">
                  <el-input :disabled="true" v-model="tableObj.dataCode" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button :loading="bntLoading" type="primary" @click="sub('forms')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { randomString } from '@/utils/myUtils'
export default {
  name: 'SidebarLogo',
  components: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      bntLoading: false,
      rules: {
        dataValue: [
          { required: true, message: '请输入数值名称', trigger: 'blur' }
        ],
        dataDesc: [
          { required: true, message: '请输入数值描述', trigger: 'blur' }
        ]
      },
      isShow: false,
      editType: false,
      dialogVisible: false,
      filterText: '',
      tableData: [],
      treeTitle: '',
      tableObj: {},
      defaultProps: {
        children: 'sysDictList',
        label: 'dataValue'
      }
    }
  },
  async mounted() {
    this.tableData = (await this.$api.getTreeList()).data.data
  },
  methods: {
    handNewAdd() {
      this.editType = false
      this.isShow = false
      this.dialogVisible = true
      this.tableObj.dataCode = randomString()
      this.tableObj.dataType = randomString()
      this.tableObj.pid = 0
    },
    handPopClos() {},
    async handPopDel(row) {
      let callBack = await this.$api.delSysDict({ id: row.id })
      this.$message({
        message: callBack.data.message,
        type: 'success'
      })
      this.init()
      console.log(callBack)
    },
    async handDel(row) {},
    async sub(formName) {
      if (this.editType) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            this.bntLoading = true
            let callBack = await this.$api.editSysDict(this.tableObj)
            this.bntLoading = false
            this.dialogVisible = false
            this.init()
            this.$message({
              message: callBack.data.message,
              type: 'success'
            })
          } else {
            console.log('error submit!!')
            this.$message({
              message: '请完成表单录入'
            })
            return false
          }
        })
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.bntLoading = true
            this.$api
              .addSysDict(this.tableObj)
              .then(res => {
                console.log(res.data)
                this.dialogVisible = false
                this.init()
                this.bntLoading = false
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              })
              .finally(() => {
                this.bntLoading = false
              })
          } else {
            console.log('error submit!!')
            this.$message({
              message: '请完成表单录入'
            })
            return false
          }
        })
      }
    },
    handleClose() {
      this.tableObj = {}
      this.dialogVisible = false
    },
    async init() {
      this.tableData = (await this.$api.getTreeList()).data.data
    },
    handDetail(row) {
      this.isShow = true
      this.dialogVisible = true
      this.tableObj = row
    },
    async handAdd(row) {
      this.editType = false
      this.isShow = false
      this.dialogVisible = true
      this.tableObj.pid = row.id
      this.tableObj.dataCode = row.dataCode
      this.tableObj.dataType = randomString()
    },
    async handEdit(row) {
      this.isShow = false
      this.dialogVisible = true
      this.editType = true
      this.tableObj = (
        await this.$api.selectSysDictByIdSysDict({ id: row.id })
      ).data.data

      console.log(this.tableObj)
    },
    handSeleDel() {},
    onConfirm() {}
  }
}
</script>

<style lang="scss" scoped>
.banner_img {
  width: 66px;
  height: 66px;
}
.goods_title {
  margin-left: 5px;
  color: #38ad93;
}
.my_tab_head /deep/ .el-input.el-input--medium,
.my_tab_head /deep/ .el-input.el-input--medium .el-input__inner {
  width: 200px;
}
.shop_btns .el-button {
  color: #38ad93 !important;
}
.sige_box {
  display: flex;
  align-items: center;

  .sige {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    // background: rgba(82, 196, 26, 1);
    display: block;
    margin-right: 7px;
  }
}

.table-main {
  background-color: #fff;

  .hand-btns {
    height: 40px;
    border: 1px solid rgba(56, 173, 147, 0.17);
    line-height: 40px;
    border: 5px;
    background-color: #ebf6f4;
    padding: 0 16px;
    .btns-title {
      color: #000000;
      font-size: 14px;
      margin: 0 14px;
    }
    .btns-clos {
      color: #4eb69f;
      font-size: 14px;
    }
  }
  .hadn-new {
    margin-bottom: 24px;
  }
  .search-btns {
    display: flex;
    align-content: center;
    // margin-left: 30px;
    .search-btn {
      width: 65px;
      height: 32px;
      background: rgba(56, 173, 147, 1);
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-right: 8px;
    }
    .search-reset {
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }
  .tab-search {
    display: flex;
    align-content: center;
    margin-bottom: 28px;
    // .search-cont:first-child {

    // }
    .search-cont {
      margin-right: 30px;
      display: flex;
      align-content: center;
      line-height: 32px;
      .search-name {
        font-size: 14px;
        color: #000;
        margin-right: 12px;
      }
    }
  }
}
</style>
